<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React Router使用</title>
    <script src="https://cdn.bootcss.com/react/16.2.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.2.0/umd/react-dom.development.js"></script>

    <script src="https://cdn.bootcss.com/react-router/4.2.0/react-router.js"></script>
    <script src="https://cdn.bootcss.com/react-router-dom/4.2.2/react-router-dom.js"></script>

    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>

    <link href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/vs2015.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>

    <script>hljs.initHighlightingOnLoad();</script>
    <style>
        body {
            margin: 8px;
            font-family: -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            Roboto,
            Oxygen,
            Ubuntu,
            Cantarell,
            "Open Sans",
            "Helvetica Neue",
            sans-serif;
        }

        .address-bar {
            margin: -8px -8px 8px;
            padding: 10px;
            background: #ccc;
            display: flex;
            align-items: center;
        }

        .ab-button {
            border: none;
            background: none;
            font-size: 30px;
            color: #444;
            outline: none;
        }

        .ab-button:focus {
            color: hsl(200, 50%, 50%)
        }

        .ab-button:hover {
            color: #666;
        }

        .ab-button:active {
            color: #000;
        }

        .url {
            background: white;
            flex: 1;
            margin-left: 10px;
            padding: 10px;
            color: #aaa;
        }

        a {
            margin-right: 15px;
        }

        a.active {color: red}
    </style>
</head>
<body>
<div id="root"></div>

<p>代码</p>
<pre><code class="js">    ReactDOM.render(
        < h1 >欢迎使用React!< /h1>,
        document.getElementById('example')
    );
</code>
<script type="text/babel">
    const { render } = ReactDOM
    const {BrowserRouter, Route, NavLink} = ReactRouterDOM

    const isActiveFunc = (match, location) => {
        console.log(match,'contact')
        return match
    }

    const Links = () => (
        <nav>
            <NavLink exact activeClassName="active" to="/">Home</NavLink>
            <NavLink activeStyle={{color: 'green'}} to={{pathname: '/about'}}>About</NavLink>
            <NavLink
                isActive={isActiveFunc}
                activeClassName="active"
                to="/contact">Contact</NavLink>
        </nav>
    )

    const App = () => (
        <BrowserRouter>
            <div>
                <AddressBar/>

                <Links />

                <Route exact path="/" render={() => <h1>Home</h1>} />
                <Route path="/about" render={() => <h1>About</h1>} />
                <Route path="/contact" render={() => <h1>Contact</h1>} />
            </div>
        </BrowserRouter>
    )

    /* 为了展示URL的变化的组件 请无视我*/
    const AddressBar = () => (
        <Route render={({ location:{pathname}, history}) => (
            <div className="address-bar">
                <div>
                    <button
                        className="ab-button"
                        onClick={history.goBack}
                    >◀︎</button>
                </div>
                <div>
                    <button
                        className="ab-button"
                        onClick={history.goForward}
                    >▶</button>
                </div>
                <div className="url">URL: {location.pathname}</div>
            </div>
        )}/>
    )

    render(<App/>, document.getElementById('root'))
</script>

</body>
</html>